.max-line(@lines) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: @lines;
    -webkit-line-clamp: @lines;
    text-overflow: ellipsis;
    overflow: hidden;
}

.wraper{
    box-sizing: border-box;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
// PC端样式
.wraper.pc {
    box-sizing: border-box;

    .content-wrap {
        @apply pt-15 pb-25 px-0 w-full flex flex-row items-start gap-25 justify-center;
    }

    .image-wrap {
        width: 480px;
        height: 360px;

        @apply rounded overflow-hidden;

        .image-type {
            object-fit: cover;
            width: 100%;
            height: 360px;
        }
    }

    .video-wrap {
        width: 480px;
        height: 360px;

        @apply rounded overflow-hidden;

        .video-type {
            object-fit: contain;
            width: 100%;
            height: 360px;
        }
    }

    .swiper-wrap {
        width: 480px;
        height: 360px;

        @apply rounded overflow-hidden;
    }

    .content-main-wrap,
    .image-main-wrap {
        @apply flex-none;
    }

    .content-main-wrap {
        max-width: 600px;
    }

    .title {
        color: var(--render-text-color-main);
        font-weight: 700;

        @apply mt-10px text-2xl;
    }

    .content {
        color: var(--render-text-color-second);
        font-weight: 400;
        max-height: 160px;
        .max-line(5);

        @apply mt-5 text-base !leading-8;
    }

    .view-btn {
        color: var(--design-theme-color);
        border: 1px solid var(--design-theme-color);
        text-decoration: none;

        @apply h-12 w-45 cursor-pointer text-base font-normal mt-20 rounded flex flex-row justify-center items-center;
    }

    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background: rgb(255 255 255 / 50%);
        opacity: 1;
        margin: 0 2px;
    }
    
    .swiper-pagination-bullet-active {
        width: 32px;
        border-radius: 23px;
        background: #FFF;
    }
}
// 移动端样式
.wraper.mobile {
    box-sizing: border-box;

    .content-wrap {
        @apply px-4 pt-5 pb-10;
    }

    .image-wrap {
        width: 100%;
        height: 257px;

        @apply rounded overflow-hidden;

        .image-type {
            object-fit: cover;
            width: 100%;
            height: 257px;
        }
    }

    .video-wrap {
        width: 100%;
        height: 257px;

        @apply rounded overflow-hidden;

        .video-type {
            object-fit: contain;
            width: 100%;
            height: 257px;
        }
    }

    .swiper-wrap {
        width: 100%;
        height: 257px;

        @apply rounded overflow-hidden;
    }

    .title {
        color: var(--render-text-color-main);
        font-size: 20px;
        font-style: normal;
        font-weight: 700;

        @apply mt-8;
    }

    .content {
        color: var(--render-text-color-second);
        font-weight: 400;
        max-height: 256px;
        .max-line(8);

        @apply mt-4 text-base !leading-8;
    }

    .view-btn {
        color: var(--design-theme-color);
        border: 1px solid var(--design-theme-color);
        text-decoration: none;

        @apply h-8 w-32 cursor-pointer text-xs font-normal mt-8 rounded flex flex-row justify-center items-center;
    }

    .swiper-pagination-bullet {
        width: 4px;
        height: 4px;
        border-radius: 4px;
        background: rgb(255 255 255 / 30%);
        opacity: 1;
        margin: 0 2px;
    }
    
    .swiper-pagination-bullet-active {
        width: 10px;
        border-radius: 23px;
        background: #FFF;
    }
}
